<template>
  <div>
    <h1>小老妹</h1>

    <div>
      <!--01 路由跳转 router-link中to的字符串写法  -->
      <!-- <router-link to="/Home/News"> 新闻</router-link>
      <router-link to="/Home/Music"> 音乐</router-link> -->

      <!--  02 路由跳转 router-link中to的对象写法 可以通过path属性来设置路由地址-->
      <!-- <router-link
      :to="{
        path:'/home/news'  
      }"
      >新闻</router-link>

      <router-link
      :to="{
        path:'/home/music'  
      }"
      >音乐</router-link> -->

      <!--03 router-link中to的对象写法 可以通过路由的name属性来设置路由地址  -->
      <router-link
        :to="{
          name: 'News',
        }"
        >新闻</router-link
      >

      <router-link
        :to="{
          name: 'Music',
        }"
        >音乐</router-link
      >
    </div>

    <!-- 组件占位符千万不能忘,否则无法显示内容 -->
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style>
</style>